<template>
	<view class="passenger-flow">
		<view class="box_9">
			<con-venues :itemChooselist='itemChooselist' :venuelist='venuelist' @confirm="confirm1"></con-venues>
			<view style="position: fixed;z-index: 999;width: 100%;top: 120rpx;">
				<view class="box_11">
					<view class="image-wrapper_7">
						<u-search v-model="searchKey3" placeholder="搜索" @search="onSearch3" :show-action="false"
							shape="square" />
					</view>
					<view class="label8_list" @click="openFilter">
						<uni-icons type="settings" size="16"></uni-icons>
						<view class="label_88">
							<text>筛选</text>
						</view>
					</view>
				</view>

				<!-- <view class="image-wrapper_7">
						<u-search v-model="searchKey1" placeholder="运动项目" @search="onSearch1" :show-action="false"
							shape="square" :clearabled="true" @focus='onfocus1' @blur='onblur1' @clear="onclear1" />
					</view>
					<view class="image-wrapper_7">
						<u-search v-model="searchKey2" placeholder="选择校区" @search="onSearch2" :show-action="false"
							shape="square" :clearabled="true" @focus='onfocus2' @blur='onblur2' @clear="onclear2" />
					</view> -->
				<!-- <view class="label_list" @click="plbatch" v-if="plshow">
						<image
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/0555f554c12d0d628b0e4e3e90147966755aa715.png"
							class="label_7"></image>
						<view class="label_77">
							批量
						</view>
					</view>
					<view class="label_list" @click="plbatch" v-if="!plshow">
						<image
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/0555f554c12d0d628b0e4e3e90147966755aa715.png"
							class="label_7"></image>
						<view class="label_77">
							设置
						</view>
					</view>
					<view class="label8_list">
						<image
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/a0caafa1d0f5c11490a41f203aab143debf439d6.png"
							class="label_8"></image>
						<view class="label_88">
							<HM-filterDropdown :menuTop="88" :filterData="filterData" :defaultSelected="defaultSelected"
								:updateMenuName="true" @confirm="confirm" dataFormat="Object"></HM-filterDropdown>
						</view>
					</view> -->
			</view>
			<view class="" v-if="onif1 == true">
				<view v-if="filteredList1.length > 0" class="list-container">
					<scroll-view scroll-y class="list">
						<view v-for="(item, index) in filteredList1" :key="index" class="list-item"
							@click="selectItem1(item)">
							<view class="" :class="[item.id ===Itemid1?'card_jec':'card_je']">
								{{ item.name }}
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="" v-if="onif2 == true">
				<view v-if="filteredList2.length > 0" class="list-container2">
					<scroll-view scroll-y class="list">
						<view v-for="(item, index) in filteredList2" :key="index" class="list-item"
							@click="selectItem2(item)">
							<view class="" :class="[item.id ===Itemid2?'card_jec':'card_je']">
								{{ item.venue_name }}
							</view>
						</view>
					</scroll-view>
				</view>
			</view>

			<!-- 选中项展示 -->
			<!-- 	<view v-if="selectedItem1" class="selected-item">
				当前选中：{{ selectedItem1.name }}
			</view> -->
			<!-- 选择会员 -->
			<view class="" style="margin-top: 74rpx;">
				<scroll-view scroll-y class="listall" v-for="(item, index) in hylist" :key="index">
					<v-gap />
					<view class="d-flex flex-column listsee">
						<view class="goods-item flex-align">
							<view class="image" @click="oncourse(item, index)">
								<!-- <u--image width="100%" height="250rpx" :src="item.cover != null ? item.cover : pic_img" radius="5"></u--image> -->
								<view
									style="width: 100%;height: 250rpx;background-color: #EDF5F5;display: flex;lex-direction: row; justify-content: center; align-items: center;">
									<image style="width: 100%;height: 250rpx;"
										:src="item.cover != null ? item.cover : pic_img" mode="aspectFit"></image>
								</view>
								<view class="image-info">{{item.stock_sales || 0}}人已报名
								</view>
							</view>
							<view class="detail" @click="addstudent(item,index)">
								<view>
									<view class="title elipsis-1">{{ item.name || '' }}</view>
									<view class="" style="display: flex; flex-direction: row; align-items: center;">
										<view class="tag flex-align">
											{{ item.course_name || '' }}
										</view>
										<view class="tag flex-align">
											{{ item.program_name || '' }}
										</view>
										<!-- <image style="width: 25rpx;height: 25rpx;"
											src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/f1c02d6507d5b869a8fa25b144993dc02a42e038.png"
											mode=""></image>
										<view style="color: #FE8C61;font-size: 24rpx;margin-left: 6rpx;">
											招生中
										</view> -->
									</view>
									<!-- <view style="font-size: 24rpx;color: #4E6EAF;margin-top: 20rpx;">
										
									</view> -->
									<view
										style="font-size: 24rpx;color: #4E6EAF;margin-top: 20rpx;display: flex; flex-direction: row; ">
										<view class="tags flex-align">
											{{ item.train_enum_name || '' }}
										</view>
										<view class="">
											{{item.area_name || ''}}
										</view>
									</view>
									<view
										style="font-size: 24rpx;color: #4E6EAF;margin-top: 20rpx;display: flex; flex-direction: row; ">
										<view class="tags flex-align">
											编码：{{ item.id || '' }}
										</view>
										<view class="" v-if="item.less_stock > 0">
											剩余：{{ item.less_stock || '' }}
										</view>
										<view class="" v-else style="color: #ff0000;">
											剩余：{{ item.less_stock || 0 }}
										</view>

									</view>
									<view style="font-size: 24rpx;color: #4E6EAF;margin-top: 20rpx;">
										{{item.display_time || ''}}
									</view>
								</view>
								<!-- <view class="flex-align">
									<view class="price">{{item.area_name}}</view>
								</view> -->
							</view>
						</view>
					</view>

				</scroll-view>

				<v-gap height="140rpx" color="#EDF5F5" />
			</view>
			<!-- <view class="d-flex flex-row justify-space-between justify-center align-center"
				style="position: fixed;bottom: 0;height: 120rpx;background-color: #fff;width: 100%;padding: 0 8%;z-index: 99;">
				<view class="" @click="plbatch" v-if="plshow"
					style="width: 45%;height: 80rpx;background: #ffffff;color: #ff4040;font-size: 24rpx;text-align: center;border-radius: 35rpx;line-height: 80rpx;border:#ff4040 1rpx solid">
					批量操作
				</view>
				<view class="" v-if="!plshow" @click="selectAllWeeks"
					style="width: 45%;height: 80rpx;background: #ffffff;color: #ff4040;font-size: 24rpx;text-align: center;border-radius: 35rpx;line-height: 80rpx;border:#ec6ff404052b 1rpx solid">
					全选
				</view>
				<view class="" @click="addstudent"
					style="width: 45%;height: 80rpx;background: linear-gradient(0deg, rgba(214, 53, 53, 0.9), rgba(255, 64, 64, 0.93), rgba(250, 142, 142, 0.93));color: #ffffff;font-size: 24rpx;text-align: center;border-radius: 35rpx;line-height: 80rpx;">
					添加学员
				</view>
			</view> -->

		</view>
		<!-- 班级详情弹窗 -->
		<u-popup @touchmove.stop :show="enrollDetailPopup" @close="closeInfo" closeOnClickOverlay mode="center"
			:safeAreaInsetBottom="false" round="10">
			<view class="storepopup" style="height: 80vh;padding: 20rpx 20rpx;width: 660rpx;">
				<view class="title flex-between">
					<text>课程信息</text>
					<u-icon @click="closeInfo" name="close-circle-fill" color="#dde3e8" size="18"></u-icon>
				</view>
				<view class="enroll-detail-popup">
					<view class=""
						style="background-color: #f4f4f4;padding: 10rpx;border-radius: 10rpx;margin-top: 20rpx;font-size: 24rpx;display: flex;flex-direction: row;  justify-content: space-between;">
						<view class="activity-card1">
							<view class="activity-header">
								<text class="activity-name">{{ activitylist.name }}</text>
								<view class="tag flex-align">
									{{ activitylist.program_name }}
								</view>
							</view>

							<view class="activity-content">
								<view class="image">
									<view
										style="width: 100%;height: 250rpx;background-color: #EDF5F5;display: flex;lex-direction: row; justify-content: center; align-items: center;">
										<image style="width: 100%;height: 250rpx;" :src="activitylist.cover"
											mode="aspectFit">
										</image>
									</view>
								</view>
								<view class="activity-info">
									<view class="" style="display: flex; flex-direction: row; align-items: center;">
										<view class="tag flex-align">
											编码{{ activitylist.id }}
										</view>
										<view class="tag flex-align">
											{{ activitylist.course_name }}
										</view>
									</view>
									<view style="font-size: 24rpx;color: #4E6EAF;display: flex; flex-direction: row; ">
										<view class="tags flex-align">
											{{ activitylist.train_enum_name }}
										</view>
										<view class="">
											{{activitylist.area_name}}
										</view>
									</view>
									<text
										class="date-range">{{ activitylist.display_start }}~{{ activitylist.display_end }}</text>
									<view class="activity-progress">
										<text class="progress-text"
											style="color: #2F75FA;">已报名：{{ activitylist.stock_sales }}/{{ activitylist.less_stock + activitylist.stock_sales}}</text>
										<!-- <view class="" style="font-size: 24rpx;color: #666;">
											{{ activitylist.course_items_name }}/{{activitylist.coach_name}}
										</view> -->
									</view>
								</view>
							</view>
							<view class="" style="height: 30rpx;width: 100%;margin-top: 20rpx;">
								<u-line-progress :percentage="activitylist.enroll_progress" activeColor="#00aa7f"
									:showText="true"></u-line-progress>
							</view>
						</view>
					</view>

					<view class=""
						style="background-color: #f4f4f4;padding: 30rpx;border-radius: 10rpx;margin-top: 20rpx;font-size: 24rpx;">
						<view class="">
							实到学员名单{{total}}人
						</view>
						<scroll-view @scrolltolower="loadMoreData" scroll-y style="height: 35vh; ">
							<view v-for="item in studentlist"
								style="background-color: #ffffff;padding: 20rpx;border-radius: 10rpx;width: 100%;margin-top: 20rpx;font-size: 24rpx;display: flex; flex-direction: column; justify-content: space-between; height: 150rpx; ">
								<view class="" style="display: flex; flex-direction: row; justify-content: space-between;align-items: center; ">
									<view class="" style="display: flex; flex-direction: row; align-items: center; ">
										<view class="">
											<image style="width: 50rpx;height: 50rpx;border-radius: 50% 50%;"
												:src="item.head_img" mode=""></image>
										</view>
										<view class="" style="display: flex; flex-direction: column;margin-left: 10rpx;">
											<view class="">
												{{item.name||''}}
											</view>
											<view class="">
												{{item.mobile||''}}
											</view>
										</view>
									</view>
									<view class="">
										<view class="">
											课时数{{item.stu_hour_num||''}}
										</view>
									</view>
									<view class="" style="display: flex; flex-direction: column;margin-left: 10rpx;">
										<view class="">
											{{item.coach_name||''}}-{{item.course_item_name||''}}
										</view>
										<view class="">
											{{item.item_name||''}}
										</view>
										
									</view>
								</view>
								<view class="" style="text-align: right;">
									{{item.create_at}}
								</view>
							</view>
						</scroll-view>

					</view>
				</view>
			</view>
		</u-popup>
		<u-popup @touchmove.stop :show="showFilterPopup" @close="closehomeInfo" closeOnClickOverlay mode="right">
			<scroll-view class="filter-content" style="height: 100vh;width: 60vw;" scroll-y>
				<view class="filter-item">
					<text class="filter-label">校区选择</text>
					<view class="item">
						<view class=" week-list flex-wrap">
							<view :class="['week-item', selectId1 === index? 'active' : '']"
								v-for="(item,index) in weekList1" :key="index" @click="timesSelect1(item,index)">
								{{item.venue_name}}
							</view>
						</view>
					</view>
				</view>
				<view class="filter-item">
					<text class="filter-label">班型</text>
					<view class="item">
						<view class=" week-list flex-wrap">
							<view :class="['week-item', selectId6 === index? 'active' : '']"
								v-for="(item,index) in weekList6" :key="index" @click="timesSelect6(item,index)">
								{{item.enum_name}}
							</view>
						</view>
					</view>
				</view>
				<view class="filter-item">
					<text class="filter-label">项目</text>
					<view class="item">
						<view class=" week-list flex-wrap">
							<view class="week-item" :class="['week-item', selectId2 === index? 'active' : '']"
								v-for="(item,index) in weekList2" :key="index" @click="timesSelect2(item,index)">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="filter-item" style="display: flex;flex-direction: row;justify-content: space-between;">
					<text class="filter-label">七天有课</text>
					<u-checkbox shape='circle' :checked="reg_face" @change='checkboxChange'>选中</u-checkbox>
				</view> -->
				<!-- 	<view class="filter-item">
					<text class="filter-label">状态</text>
					<view class="item">
						<view class=" week-list flex-wrap">
							<view class="week-item" :class="['week-item', selectId3 === index? 'active' : '']"
								v-for="(item,index) in weekList3" :key="index" @click="timesSelect3(item,index)">
								{{item}}
							</view>
						</view>
					</view>
				</view> -->
				<!-- <view class="filter-item">
					<text class="filter-label">教练</text>
					<view class="item">
						<view class=" week-list flex-wrap">
							<view class="week-item" :class="['week-item', selectId4 === index? 'active' : '']"
								v-for="(item,index) in weekList4" :key="index" @click="timesSelect4(item,index)">
								{{item.coach_name}}
							</view>
						</view>
					</view>
				</view> -->
				<!-- <view class="filter-item">
					<text class="filter-label">课程</text>
					<view class="item">
						<view class=" week-list flex-wrap">
							<view class="week-item" :class="['week-item', selectId5 === index? 'active' : '']"
								v-for="(item,index) in weekList5" :key="index" @click="timesSelect5(item,index)">
								{{item.course_name}}
							</view>
						</view>
					</view>
				</view> -->
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	const personal = require("@/api/personal/index.js");
	const venues = require("@/api/venues/venues.js");
	const train = require("@/api/train/index.js");
	export default {
		data() {
			return {
				filterData: [],
				itemChooselist: {},
				venuelist: [],
				plshow: true,
				weekSelect: [], //选中的
				hylist: [],
				isAllSelect: false, //是否全选
				listQuery: { //分页
					pageNo: 1,
					pageSize: 6,
				},
				totalPage: '', //几页
				studentlist: [],
				searchKey1: "",
				searchKey2: '', // 搜索关键词
				originalList1: [],
				filteredList1: [], // 过滤后的列表，用于展示
				selectedItem1: null, // 选中项的数据
				onif1: false,
				originalList2: [],
				filteredList2: [], // 过滤后的列表，用于展示
				selectedItem2: null, // 选中项的数据
				onif2: false,
				Itemid1: '',
				Itemid2: "",
				searchKey3: '',
				venue_id: '',
				enrollDetailPopup: false,
				listQuery1: { //分页
					pageNo1: 1,
					pageSize1: 10,
				},
				activitylist: {},
				totalPage1: '',
				total: 0,
				showFilterPopup:false,
				selectId1: null,
				weekList1: [],
				selectId2: null,
				weekList2: [],
				selectId3: null,
				weekList3: [],
				selectId4: null,
				weekList4: [],
				selectId5: null,
				weekList5: [],
				selectId6: null,
				weekList6: [],
				area_id: '', //所属校区
				train_program: '', //项目
				status: '', //状态
				coach_id: '', //教练
				course_id: '', //课程
				class_name: '', //班级名称
			}
		},
		watch: {
			// 监听搜索关键词的变化，实时过滤列表
			searchKey1(newVal) {
				this.filterList1(newVal);
			},
			searchKey2(newVal) {
				this.filterList2(newVal);
			},
		},
		onLoad(options) {
			var data = uni.getStorageSync("wqzdy");
			var items = JSON.parse(data)
			this.venuelist = items
			console.log(this.venuelist, 'this.venuelist')
			// this.itemChooselist = this.venuelist[0]
			// 处理itemChooselist的逻辑
			if (this.venuelist.length > 0) {
				this.itemChooselist = this.venuelist[0]
				this.venue_id = this.venuelist[0].id
			} else {
				this.itemChooselist = {}; // 或者设置为其他默认值
			}
		},
		onShow() {
			this.listQuery.pageNo = 1
			this.trainpro()
			this.shuju()
			this.cls_options()
		},
		mounted() {
			// 初始化过滤后的列表为原始列表
			this.filteredList1 = this.originalList1;
			this.filteredList2 = this.originalList2;
		},
		methods: {
			async cls_options() {
				let params = {
					venue_id: this.venue_id,
				};
				let res = await train.cls_options(params);
				if (res.code == 1) {
					this.weekList1 = res.data.areaList
					this.weekList2 = res.data.projectList
					this.weekList3 = res.data.statusList
					this.weekList4 = res.data.coachList
					this.weekList5 = res.data.courseList
					this.weekList6 = res.data.trainEnumList
					this.selected_Tab = res.data.statusList[0].id
					this.status = res.data.statusList[0].id
					
					console.log(this.status, 'this.status222')
				}
			},
			oncourse(activity, index) {
				// this.studentlist = []
				// this.listQuery1.pageNo1 = 1
				// this.activitylist = activity
				// this.enrollDetailPopup = true
				// this.trainchosenslist()
				uni.navigateTo({
					url: `../../page_venues/training/traininglist?selectionArr=${encodeURIComponent(JSON.stringify(activity))}` + "&venue_id=" + this.venue_id + "&atstus=" + 2
				})
			},
			async trainchosenslist(activity, index) {
				let that = this
				if (this.listQuery1.pageNo1 == 1) that.studentlist = [];
				let params = {
					id: this.activitylist.id,
					page: this.listQuery1.pageNo1,
					pageSize: this.listQuery1.pageSize1,
				};
				let res = await train.trainchosens(params);
				if (res.code == 1) {
					that.studentlist = that.studentlist.concat(res.data.data); //将数据拼接在一起
					that.totalPage1 = res.data.last_page
					that.total = res.data.total
				}
			},
			loadMoreData() {
				if (this.totalPage1 <= this.listQuery1.pageNo1) {
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery1.pageNo1 += 1;
				this.trainchosenslist()
			},
			closeInfo() {
				this.enrollDetailPopup = false
			},
			async shuju() {
				let params = {
					venue_id: this.venue_id
				}
				let res = await venues.studenttrain_conf(params)
				if (res.code === 1) {
					console.log(res, 'resresres')
					this.originalList1 = res.data.projectList
					this.originalList2 = res.data.areaList
				}

			},
			async trainpro() {
				let that = this;
				if (this.listQuery.pageNo === 1) that.hylist = [];
				let params = {
					keyword: this.searchKey3,
					pageSize: this.listQuery.pageSize,
					page: this.listQuery.pageNo,
					venue_id: this.venue_id,
					train_program: this.train_program, //项目
					area_id: this.area_id, //所属校区
					train_enum_id: this.train_enum_id,
					course_id: this.course_id, //课程
					class_name: this.keyword, //班级名称
				}
				let res = await venues.trainpro(params)
				if (res.code === 1) {
					// this.hylist = res.data.list.data
					that.hylist = that.hylist.concat(res.data.list.data); //将数据拼接在一起
					that.totalPage = res.data.list.last_page
				}
			},
			// 下拉刷新
			onReachBottom() {
				if (this.totalPage <= this.listQuery.pageNo) {
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.pageNo += 1;
				this.trainpro()
			},

			onedit(item, index) {
				uni.navigateTo({
					url: `./train_detail?selectionArr=${encodeURIComponent(JSON.stringify(item))}` +
						"&status=" + 1 + "&venue_id=" + this.venue_id
				})
			},
			ondelete(item, index) {
				let that = this
				uni.showModal({
					title: '提示',
					// 提示文字
					content: '是否删除！',
					// 取消按钮的文字自定义
					cancelText: "取消",
					// 确认按钮的文字自定义
					confirmText: "确定",
					//删除字体的颜色 
					confirmColor: '#000000',
					//取消字体的颜色
					cancelColor: '#999',
					success: function(res) {
						if (res.confirm) {
							let params = {
								id: item.id
							};
							venues.studentdel(params).then(res => {
								if (res.code == 1) {
									uni.$u.toast(res.info);
									setTimeout(() => {
										that.trainpro()
									}, 1000)
								}
							})
						} else {}
					}
				})
			},
			// 新增的全选方法
			selectAllWeeks() {
				if (this.weekSelect.length === this.hylist.length) {
					// 如果已全选，则清空选中数组
					this.weekSelect = [];
				} else {
					// 如果未全选，则选中所有项目
					this.weekSelect = this.hylist.map(item => item.id);
				}
			},
			handSelect(item) {
				let data = item.id;
				// 使用indexOf检查是否已选中，避免重复或遗漏
				const index = this.weekSelect.indexOf(data);
				if (index > -1) {
					// 如果已选中，则移除
					this.weekSelect.splice(index, 1);
				} else {
					// 如果未选中，则添加
					this.weekSelect.push(data);
				}
			},
			handSelects(data) {
				uni.navigateTo({
					url: '../studentdetail/index'
				})
			},
			plbatch() {
				this.plshow = !this.plshow
			},
			confirm(e) {
				uni.navigateTo({
					url: './shaixuan'
				})
				// this.indexArr = e.index;
				// this.valueArr = e.value;

			},
			confirm1(data) {
				this.venue_id = data
				console.log(data, 'data');
				// 直接根据接收到的 id 在 venuelist 中查找对应的场馆对象
				const selectedItem = this.venuelist.find(item => item.id === data);
				if (selectedItem) {
					// 将找到的场馆对象赋值给 itemChooselist
					this.itemChooselist = selectedItem;
				} else {
					console.log(`未找到 id 为 ${data} 的场馆对象`);
				}
				console.log(this.itemChooselist, 'this.itemChooselist');
				this.trainpro();
			},
			addstudent(item, index) {
				uni.navigateTo({
					url: `./train_detail?selectionArr=${encodeURIComponent(JSON.stringify(item))}` +
						"&status=" + 1 + "&venue_id=" + this.venue_id + "&venue_name=" + this
						.itemChooselist.venue_name
				})
			},
			// 过滤列表方法
			filterList1(key) {
				if (key) {
					this.filteredList1 = this.originalList1.filter(item =>
						item.name.includes(key)
					);
				} else {
					this.filteredList1 = this.originalList1;
				}
			},
			onfocus1(value) {
				console.log(value, 'valuevalue111')
				this.onif1 = true
			},
			onblur1(value) {
				console.log(value, 'valuevalue222')
				this.onif1 = false
			},
			// 搜索事件处理
			onSearch1(value) {
				this.filterList1(value);
			},
			// 搜索事件处理
			onSearch3(value) {
				this.searchKey3 = value
				this.trainpro()
			},
			// 选择列表项事件处理
			selectItem1(item) {
				this.onif1 = false
				this.selectedItem1 = item;
				this.searchKey1 = item.name; // 可选：将搜索关键词设置为选中项的名称
				this.Itemid1 = item.id
				// 可以在此处添加其他逻辑，如关闭搜索结果列表等
				this.trainpro()
			},
			onclear1() {
				this.hylist = []
				this.searchKey1 = ''
				this.Itemid1 = ''
				this.trainpro()
			},
			// 过滤列表方法
			filterList2(key) {
				if (key) {
					this.filteredList2 = this.originalList2.filter(item =>
						item.venue_name.includes(key)
					);
				} else {
					this.filteredList2 = this.originalList2;
				}
			},
			onfocus2(value) {
				console.log(value, 'valuevalue111')
				this.onif2 = true
			},
			onblur2(value) {
				console.log(value, 'valuevalue222')
				this.onif2 = false
			},
			// 搜索事件处理
			onSearch2(value) {
				console.log(value, 'value')
				this.filterList2(value);
			},
			// 选择列表项事件处理
			selectItem2(item) {
				console.log(item, 'item')
				this.onif2 = false
				this.selectedItem2 = item;
				this.searchKey2 = item.venue_name; // 可选：将搜索关键词设置为选中项的名称
				this.Itemid2 = item.id
				// 可以在此处添加其他逻辑，如关闭搜索结果列表等
				this.trainpro()
			},
			onclear2() {
				this.hylist = []
				this.searchKey2 = ''
				this.Itemid2 = ''
				this.trainpro()
			},
			openFilter() {
				this.showFilterPopup = true;
			},
			closehomeInfo() {
				this.showFilterPopup = false;
			},
			timesSelect1(item, index) {
				if (this.selectId1 === index) {
					this.selectId1 = null;
					this.area_id = ''
				} else {
					this.selectId1 = index
					this.area_id = item.id
				}
				this.listQuery.pageNo = 1
				this.trainpro()
			},
			timesSelect2(item, index) {
				if (this.selectId2 === index) {
					this.selectId2 = null;
					this.train_program = ''
				} else {
					this.selectId2 = index
					this.train_program = item.id
				}
				this.listQuery.pageNo = 1
				this.trainpro()
			},
			timesSelect6(item, index) {
				if (this.selectId6 === index) {
					this.selectId6 = null;
					this.train_enum_id = ''
				} else {
					this.selectId6 = index
					this.train_enum_id = item.id
				}
				this.listQuery.pageNo = 1
				this.trainpro()
			},
			timesSelect3(item, index) {
				if (this.selectId3 === index) {
					this.selectId3 = null;
					this.status = ''
				} else {
					this.selectId3 = index
					this.status = index
				}
				this.listQuery.pageNo = 1
				this.trainpro()
			},
			timesSelect4(item, index) {
				if (this.selectId4 === index) {
					this.selectId4 = null;
					this.coach_id = ''
				} else {
					this.selectId4 = index
					this.coach_id = item.id
				}
				this.listQuery.pageNo = 1
				this.trainpro()
			},
			timesSelect5(item, index) {
				if (this.selectId5 === index) {
					this.selectId5 = null;
					this.course_id = ''
				} else {
					this.selectId5 = index
					this.course_id = item.id
				}
				this.listQuery.pageNo = 1
				this.trainpro()
			},
		}
	}
</script>

<style lang="scss" scoped>
	// @import '../../static/css/member/member_index.scss';
	.passenger-flow {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #EDF5F5;
		padding: 0rpx 0 50rpx 0;
		position: relative;
		.filter-content {
			background-color: #ffffff;
			padding: 20rpx 10rpx 20rpx 20rpx;
			border-radius: 32rpx 32rpx 0 0;
			.filter-item {
				margin-bottom: 24rpx;
			}
			
			.item {
				// padding: 29rpx 30rpx 30rpx;
				padding: 0 20rpx 20rpx 20rpx;
			
				.atinput {
					// border: #EBECEE 1rpx solid;
					font-size: 24rpx;
					height: 60rpx;
					width: 600rpx;
					padding-left: 20rpx;
				}
			
				.item-title {
					color: rgb(153, 153, 153);
					font-size: 28rpx;
					font-weight: 500;
					margin-bottom: 20rpx;
				}
			
				.value {
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 500;
				}
			
				.time-cell {
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 500;
					justify-content: flex-start;
			
					.time {
						width: 49%;
			
						&:last-of-type {
							margin-left: 20rpx;
						}
					}
				}
			
				.week-list {
					flex-direction: row;
					width: 100%;
					font-size: 24rpx;
					flex-wrap: wrap;
					display: flex;
			
					.week-item {
						padding: 15rpx 0;
						background-color: rgb(243, 243, 243);
						border-radius: 5rpx;
						text-align: center;
						color: rgb(51, 51, 51);
						font-size: 24rpx;
						font-weight: 500;
						border: solid 2rpx transparent;
						box-sizing: border-box;
						padding: 6rpx 12rpx;
						margin-top: 20rpx;
						margin-right: 20rpx;
					}
			
					.active {
						color: rgba(255, 98, 0, 1);
						background-color: rgba(255, 65, 5, 0.1);
						// border: solid 2rpx rgb(99, 93, 247);
						position: relative;
					}
			
					.active1 {
						color: rgba(255, 98, 0, 1);
						background-color: rgba(255, 65, 5, 0.1);
						// border: solid 2rpx rgb(99, 93, 247);
						position: relative;
					}
			
					.active2 {
						color: rgba(255, 98, 0, 1);
						background-color: rgba(255, 65, 5, 0.1);
						// border: solid 2rpx rgb(99, 93, 247);
						position: relative;
					}
			
					.check {
						color: rgb(51, 51, 51);
						font-size: 24rpx;
						position: absolute;
						bottom: 10rpx;
						right: 0;
					}
				}
			}
			
			.filter-label {
				font-size: 28rpx;
				color: #666666;
				margin-bottom: 16rpx;
				display: block;
			}
		}
		
		

		.u-search {
			margin-bottom: 20rpx;
		}

		.list-container {
			max-height: 300rpx;
			overflow-y: auto;
			box-shadow: 0 0 18rpx 8rpx hsla(0, 0%, 40%, .1);
			border-radius: 4rpx;
			padding: 10rpx;
			background-color: #fff;
			position: fixed;
			z-index: 999;
			top: 222rpx;
			left: 40rpx;
			width: 300rpx;
			font-size: 22rpx;

		}

		.list-container2 {
			max-height: 300rpx;
			overflow-y: auto;
			box-shadow: 0 0 18rpx 8rpx hsla(0, 0%, 40%, .1);
			border-radius: 4rpx;
			padding: 10rpx;
			background-color: #fff;
			position: fixed;
			z-index: 999;
			top: 222rpx;
			right: 40rpx;
			width: 300rpx;
			font-size: 28rpx;

		}

		.list {
			height: 100%;
		}

		.list-item {
			padding: 15rpx;
			// border-bottom: 1px solid #eee;
			cursor: pointer;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 30rpx;
		}

		.card_jec {
			color: rgb(13, 132, 255);
		}

		.card_je {
			color: #000000;
		}

		.list-item:last-child {
			border-bottom: none;
		}

		.list-item:hover {
			background-color: #f5f5f5;
		}

		.selected-item {
			margin-top: 20rpx;
			font-size: 18rpx;
			color: #333;
		}

		.box_9 {
			width: 750rpx;
			height: 100%;
			// margin-bottom: 1rpx;
			display: flex;
			flex-direction: column;

			.tag-list {
				display: flex;
				margin-top: 30rpx;
				padding: 0 20rpx;

				/deep/ view {
					margin-left: 4rpx;
				}
			}

			.box_11 {
				width: 100%;
				height: 130rpx;
				display: flex;
				flex-direction: row;
				background: #ffffff;
				padding: 20rpx 0;
				position: absolute;
				justify-content: space-around;

				// .image-wrapper_7 {
				// 	width: 541rpx;
				// 	height: 60rpx;
				// 	flex-direction: row;
				// 	display: flex;
				// 	margin-top: 15rpx;
				// }
				.image-wrapper_7 {
					position: absolute;
					left: 30rpx;
					top: 30rpx;
					width: 600rpx;
					height: 62rpx;
					flex-direction: row;
					display: flex;
				}

				.label_list {
					display: flex;
					flex-direction: column;
					position: absolute;
					justify-content: center;
					/* 相对父元素水平居中 */
					align-items: center;
					/*  子元素相对父元素垂直居中 */
					right: 90rpx;
					width: 80rpx;
					top: 27rpx;

					.label_7 {
						width: 36rpx;
						height: 36rpx;
					}

					.label_77 {
						width: 60rpx;
						height: 36rpx;
						color: #333333;
						font-size: 26rpx;
						text-align: center;
					}
				}

				.label8_list {
					display: flex;
					flex-direction: column;
					position: absolute;
					justify-content: center;
					/* 相对父元素水平居中 */
					align-items: center;
					/*  子元素相对父元素垂直居中 */
					right: 20rpx;
					width: 80rpx;
					top: 27rpx;

					.label_8 {
						width: 36rpx;
						height: 36rpx;
					}

					.label_88 {
						width: 60rpx;
						height: 36rpx;
						color: #333333;
						font-size: 26rpx;
						text-align: center;
					}
				}
			}

			.all_whole {
				width: 100%;
				display: flex;
				flex-direction: column;
				background: #ffffff;

				.all_whole_be {
					display: flex;
					flex-direction: row;
					justify-content: space-around;

					.all_whole_or {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						width: 20%;
						height: 150rpx;
						border-radius: 20rpx;
					}

					/* 使用类名来设置背景色 */
					.bg-color-all {
						background: linear-gradient(0deg, rgb(173, 201, 246) 0%, rgb(231, 239, 255) 100%);
					}

					.bg-color-reading {
						background: linear-gradient(0deg, #ccffcc 0%, #edffea 100%);
					}

					.bg-color-graduated {
						background: linear-gradient(0deg, #fbdafd 0%, #fdeffd 100%);
					}

					.bg-color-potential {
						background: linear-gradient(0deg, #f9ffcf 0%, #fdffe9 100%);
					}

					.wz-color-all1 {
						font-size: 24rpx;
					}

					.wz-color-all2 {
						color: #3479da;
						font-weight: 600;
						font-size: 26;
					}

					.wz-color-reading2 {
						color: #67ca55;
						font-weight: 600;
						font-size: 26;
					}

					.wz-color-graduated2 {
						color: #a672c6;
						font-weight: 600;
						font-size: 26;
					}

					.wz-color-potential2 {
						color: #b39b64;
						font-weight: 600;
						font-size: 26;
					}
				}

				.all_potent {
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					color: #c2c2c2;
					font-size: 22rpx;
					height: 80rpx;
					width: 100%;
					justify-content: space-between;
					align-items: center;
					padding: 0 20rpx;

					.all_shuju1 {}

					.all_shuju2 {
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;

						.all_shuju2_img {
							width: 20rpx;
							height: 20rpx;
							margin-right: 10rpx;
						}
					}
				}

				.alls_potent {
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					height: 80rpx;
					width: 100%;
					justify-content: space-between;
					align-items: center;
					padding: 0 20rpx;

					.alls_shuju1 {
						font-size: 28rpx;
					}

					.alls_shuju2 {
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;

						.alls_shuju2_img {
							width: 20rpx;
							height: 20rpx;
						}
					}
				}
			}

			.listall {
				.listsee {
					background-color: #fff;
					padding: 30rpx;
					border-radius: 10rpx;
					width: 94%;
					margin-left: 3%;
					border: 2rpx #fff solid;

					.goods-item {
						height: 250rpx;

						.image {
							width: 200rpx;
							height: 100%;
							border-radius: 7rpx;
							// overflow: hidden;
							position: relative;

							/deep/ .u-transition {
								width: 100%;
								height: 100%;
							}

							.image-info {
								position: absolute;
								bottom: 0;
								width: 100%;
								left: 0;
								font-size: 24rpx;
								text-align: center;
								color: white;
								padding: 10rpx 0;
								background-color: rgba(0, 0, 0, 0.5);
							}
						}

						.detail {
							flex: 1;
							width: 0;
							height: 100%;
							display: flex;
							flex-direction: column;
							margin-left: 20rpx;
							justify-content: space-between;

							.title {
								font-size: 28rpx;
								margin-bottom: 10rpx;
								width: 100%;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}

							.tag {
								font-size: 22rpx;
								color: #2F75FA;
								background-color: #d5e3fe;
								border-radius: 8rpx;
								padding: 5rpx 10rpx;
								margin-right: 20rpx;
							}

							.tags {
								font-size: 22rpx;
								color: #2F75FA;
								background-color: #d5e3fe;
								border-radius: 8rpx;
								padding: 5rpx 10rpx;
								margin-right: 20rpx;
							}

							.detail-2 {
								color: #a3a3a3;
								font-size: 23rpx;

								image {
									width: 25rpx;
									height: 25rpx;
									margin-right: 10rpx;
								}
							}

							.price {
								color: #ff6a42;

								text {
									font-weight: 700;
									font-size: 37rpx;
								}
							}

							.info {
								color: #a3a3a3;
								font-size: 23rpx;
								margin-left: 15rpx;
								transform: translateY(4rpx);
							}
						}
					}
				}

				.active1 {
					border: 2rpx #0000ff solid;
				}
			}

		}

		.storepopup {
			.activity-card {
				background: #ffffff;
				padding: 24rpx;
				border-radius: 12rpx;
				box-shadow: 0 2px 8rpx rgba(0, 0, 0, 0.05);
				width: 100%;
				margin-bottom: 20rpx;
			}

			.activity-card1 {
				background: #ffffff;
				padding: 24rpx;
				border-radius: 12rpx;
				box-shadow: 0 2px 8rpx rgba(0, 0, 0, 0.05);
				width: 100%;
			}

			.activity-content {
				display: flex;
				gap: 20rpx;
				margin-top: 20rpx;
			}

			.image {
				width: 200rpx;
				height: 100%;
				border-radius: 7rpx;
				// overflow: hidden;
				position: relative;

				/deep/ .u-transition {
					width: 100%;
					height: 100%;
				}

				.image-info {
					position: absolute;
					bottom: 0;
					width: 100%;
					left: 0;
					font-size: 24rpx;
					text-align: center;
					color: white;
					padding: 10rpx 0;
					background-color: rgba(0, 0, 0, 0.5);
				}
			}

			.activity-image {
				width: 200rpx;
				height: 160rpx;
				border-radius: 8rpx;
				flex-shrink: 0;
			}

			.activity-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				// gap: 16rpx;
			}

			.activity-info {
				display: flex;
				justify-content: flex-end;
				// align-items: center;
				gap: 28rpx;
			}


			.tag {
				font-size: 22rpx;
				color: #2F75FA;
				background-color: #d5e3fe;
				border-radius: 8rpx;
				padding: 5rpx 10rpx;
				margin-right: 20rpx;
			}

			.tags {
				font-size: 22rpx;
				color: #2F75FA;
				background-color: #d5e3fe;
				border-radius: 8rpx;
				padding: 5rpx 10rpx;
				margin-right: 20rpx;
			}

			.date-range {
				font-size: 24rpx;
				color: #666;
			}

			.activity-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;
			}

			.activity-name {
				font-size: 28rpx;
				font-weight: 500;
				color: #333;
			}

		}
	}
</style>